<template>
    <div class="form-container">
        <header>
            <span>
                <el-page-header @back="closeWindow" content="合作单位维护" />
            </span>
            <span>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </span>
        </header>
        <div class="form-content">
            <el-form :model="form" class="form-info" :rules="rules">
                <span class="form-title">单位信息</span>
                <el-form-item label="单位名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <el-form-item label="单位类型" prop="category">
                    <el-select v-model="form.category" placeholder="请选择">
                        <el-option
                            v-for="item in categoryOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位性质名称" prop="typeName">
                    <el-select v-model="form.typeName" placeholder="请选择" @change="changeTypeName()">
                        <el-option
                            v-for="item in props.typeOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业性质名称" prop="characterName">
                    <el-select v-model="form.characterName" placeholder="请选择" @change="changeCharacterName()">
                        <el-option
                            v-for="item in props.proOptions"
                            :key="item.id"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="省" prop="province">
                    <el-input v-model="form.province" placeholder="请输入省"></el-input>
                </el-form-item>
                <el-form-item label="市" prop="city">
                    <el-input v-model="form.city" placeholder="请输入市"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
                </el-form-item>
                <el-form-item label="所属办事处" prop="branchOffice">
                    <el-input v-model="form.branchOffice" placeholder="请输入所属办事处"></el-input>
                </el-form-item>
                <el-form-item label="重要程度" prop="importanceDegree">
                    <el-radio-group v-model="form.importanceDegree">
                        <el-radio :label="0">一般</el-radio>
                        <el-radio :label="1">重要</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分管领导" prop="branchLeader">
                    <el-input
                        v-model="form.branchLeader"
                        placeholder="请输入分管领导"
                        readonly
                        @click.native="chooseEmployee"
                    ></el-input>
                </el-form-item>
                <el-form-item label="关键人员" prop="criticalPerson">
                    <el-input v-model="form.criticalPerson" placeholder="请输入关键人员"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="contact">
                    <el-input v-model="form.contact" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系人职务" prop="post">
                    <el-input v-model="form.post" placeholder="请输入联系人职务"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入联系人电话"></el-input>
                </el-form-item>
                <el-form-item label="18位纳税人识别号" prop="taxIdNo">
                    <el-input v-model="form.taxIdNo" placeholder="请输入18位纳税人识别号"></el-input>
                </el-form-item>
                <el-form-item label="开户行名称" prop="bankName">
                    <el-input v-model="form.bankName" placeholder="请输入开户行名称"></el-input>
                </el-form-item>
                <el-form-item label="开户行帐号" prop="bankNo">
                    <el-input v-model="form.bankNo" placeholder="请输入开户行帐号"></el-input>
                </el-form-item>
                <el-form-item label="单位联系电话" prop="telphone">
                    <el-input v-model="form.telphone" placeholder="请输入单位联系电话"></el-input>
                </el-form-item>
            </el-form>
        </div>

        <!-- 人员角色弹框 -->
        <el-dialog
            title="选择人员"
            v-model="showEmployeeGrid"
            width="80%"
            :lock-scroll="true"
            :close-on-click-modal="false"
            destroy-on-close
        >
            <EmployeeGrid v-if="showEmployeeGrid" @select="UserRoleRow"></EmployeeGrid>
        </el-dialog>
    </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import http from '@/http.js'
import { ElNotification } from 'element-plus'
import EmployeeGrid from '@/components/bas/EmployeeGrid.vue'

const props = defineProps({
    id: {
        type: String,
        default: ''
    },
    proOptions: {
        type: Array,
        default: []
    },
    typeOptions: {
        type: Array,
        default: []
    }
})

const emit = defineEmits(['close'])
const closeWindow = () => {
    emit('close')
}

onMounted(() => {
    if (props.id !== '') {
        loadDetail()
    }
})

let rules = {
    name: [{ required: true, message: '', trigger: 'blur' }]
}
// 表单初始化
let form = reactive({
    id: '',
    name: '',
    category: '',
    typeCode: '',
    typeName: '',
    characterCode: '',
    characterName: '',
    province: '',
    city: '',
    address: '',
    branchOffice: '',
    importanceDegree: '0',
    branchLeader: '',
    criticalPerson: '',
    contact: '',
    post: '',
    phone: '',
    taxIdNo: '',
    bankName: '',
    bankNo: '',
    telphone: ''
})

const loadDetail = () => {
    http.fetchForm({
        url: '/pub/company/findById',
        method: 'get',
        data: {
            id: props.id
        }
    }).then((res) => {
        let data = res.data
        Object.assign(form, data)
    })
}

const categoryOptions = [
    {
        label: '客户',
        value: 1
    },
    {
        label: '业主',
        value: 2
    },
    {
        label: '付款单位',
        value: 3
    }
]

// 表单提交
const onSubmit = async () => {
    if (validate(form)) {
        http.fetchJson({
            url: '/pub/company/save',
            data: form
        }).then((res) => {
            ElNotification({
                title: '提示',
                message: '操作成功',
                type: 'success'
            })
            closeWindow()
        })
    } else {
        ElNotification({
            title: '提示',
            message: '打*项必填',
            type: 'success'
        })
    }
}

// 判断必填字段
const validate = (form) => {
    if (form.name === null || form.name === '') return false
    return true
}

// 人员选择
const showEmployeeGrid = ref(false)
const chooseEmployee = () => {
    showEmployeeGrid.value = true
}
const UserRoleRow = (params) => {
    form.branchLeader = params[0].name
    showEmployeeGrid.value = false
}

const changeTypeName = () => {
    props.typeOptions.forEach((v) => {
        if (form.typeName === v.label) {
            form.typeCode = v.id
        }
    })
}

const changeCharacterName = () => {
    props.proOptions.forEach((v) => {
        if (form.characterName === v.label) {
            form.characterCode = v.id
        }
    })
}
</script>
<style scoped>
@import '@/assets/css/form.css';
</style>
